<template>
  <div>
    <h1>test axios</h1>
    <input type="text" v-model="keyWord" />
    <!-- <h1>{{ keyWord }}</h1> -->
    <button @click="getSong">搜索歌曲信息</button>
    <ul>
      <li v-for="(item, index) in songList" :key="index">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      keyWord: "",
      songList: [],
    };
  },
  methods: {
    getSong() {
      console.log(this.keyWord);
      //收集关键字 发送ajax请求
      //   axios发送get请求的简写方式
      // axios返回值是promise对象
      axios
        .get(`https://autumnfish.cn/search?keywords=${this.keyWord}`)
        .then((data) => {
          console.log(data.data.result.songs);
          // 把从服务器获取的数据赋值给data当中的初始值，在模板中进行渲染
          this.songList = data.data.result.songs;
        });
    },
  },
};
/* 
axios是一个基于promise的http库 可以用在浏览器 也可以用在 node.js
下载
npm install -S axios

get  query ?key=value&key=valu
https://autumnfish.cn/search?keywords=爱

*/
</script>

<style lang="scss" scoped>
</style>